<template>
  <!-- 热门搜索 -->
  <div class="centent-find">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="item in swiperList" :key="item.id">
        <img v-lazy="item.src" />
      </van-swipe-item>
    </van-swipe>
    <ul class="centent_ul">
      <li class="centent_li" v-for="item in dataList" :key="item.name">
        <div class="cent_h">
          <van-image
            class="centent_img"
            :src="item.icon_url"
            :alt="item.name"
            lazy-load
          />
          <span class="name_li">{{ item.name }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import api from "@/api/index";
export default {
  data() {
    return {
      dataList: [],
      swiperList: [],
    };
  },
  async beforeMount() {
    let { data } = await api.getHot();
    this.dataList = data;
    let { data1 } = await api.getSwiper();
    console.log(data1);
    this.swiperList = Object.freeze(data1);
    console.log(this.swiperList);
  },
};
</script>

<style lang="less">
.centent-find {
  width: 300px;
  margin: 0 10px 10px 10px;
  box-sizing: border-box;
  position: relative;
  right: 0;
}
.van-swipe {
  width: 274px;
  height: 100px;
  background-color: #cfcfcfb2;
  border-radius: 5px;
  img {
    width: 100%;
    height: 100%;
  }
}
.cent_h {
  position: relative;
  padding: 10px 0;
  .name_li {
    position: absolute;
    bottom: 15px;
    left: 0;
    color: #fff;
    height: 20px;
    overflow: hidden;
    font-size: 12px;
    padding: 5px;
  }
}
.centent_ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.centent_li {
  width: 110px;
  // display: inline-block;
  overflow: hidden;
  &:nth-child(2n-2) {
    width: 140px;
  }
}
.centent_img {
  width: 100%;
  background-color: #cfcfcfb2;
  // height: 100px;
  // display: block;
  border-radius: 10px;
}
.van-swipe__indicator--active {
  background: #f56555;
}
.van-image__img {
  width: 100%;
  height: 100px;
  border-radius: 10px;
}
</style>